<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #bookInfo {
        display: flex;
        text-align: center;
        border: 1px solid black;
        width: 300px;
        height: 200px;
        visibility: hidden;
    }

    .dialog {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 0, 0, 0.5);
        visibility: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #contentDiv {
        width: 800px;
        height: 200px;
        background-color: white;
        text-align: center;
        overflow: auto;
    }

</style>
<script src="book.js"></script>
<script>
    window.onload = function () {
        showBooks(bookArray);
    }

    /**
     * 显示数组所有图书
     */
    function showBooks(bookArray) {
        let str = "";
        bookArray.forEach(n => {
            str += `<tr>
                        <td>${n.name}</td>
                        <td>${n.author}</td>
                        <td>${n.price}</td>
                        <td><input type="button" value="查看" onclick="showBookInfo(${n.code})">
                            <input type="button" value="加入购物车" onclick="addShoppingCart(${n.code})"></td>
                    </tr>`;
        });
        $("bookList").innerHTML = str;
    }

    /**
     * 显示指定图书信息
     * @param code 图书编码
     */
    function showBookInfo(code) {
        let book = bookArray.find(n => n.code == code);
        $("nameSpan").innerHTML = book.name;
        $("authorSpan").innerHTML = book.author;
        $("dateSpan").innerHTML = book.date;
        $("priceSpan").innerHTML = book.price;
        $("bookImg").src = book.imgPath;

        $("bookInfo").style.visibility = "visible";
    }

    /**
     * 按书名模糊查询图书
     */
    function findByName() {
        let array;
        if ($("findText").value == "") {
            array = bookArray;
        } else {
            array = bookArray.filter(n => n.name.indexOf($("findText").value) != -1);
        }
        //显示查询结果
        showBooks(array);
    }

    /**
     * 显示购物车
     */
    function showShoppingCart() {
        let str = "";
        let total = 0;
        shoppingCart.forEach(n => {
            str += `<tr>
                    <td>${n.book.name}</td>
                    <td>${n.book.price}</td>
                    <td><input type="number" min="1" value="${n.num}" onblur=changeNum(${n.book.code},this)></td>
                    <td>${n.book.price * n.num}</td>
                    <td><input type="button" value="移除商品" onclick="delShop(${n.book.code})"></td>
                    </tr>`;
            total += n.book.price * n.num;
        });
        $("cartData").innerHTML = str;
        $("totalSpan").innerHTML = "￥" + total;
    }

    /**
     * 隐藏购物车
     */
    function hideShoppingCart() {
        $("shoppingCartDiv").style.visibility = "hidden";
    }

    /**
     *更改购物车中指定编号图书的数量
     * @param bookCode 图书编号
     * @numTextObj 数量文本框
     */
    function changeNum(bookCode, numTextObj) {
        let shop = shoppingCart.find(n => n.book.code == bookCode);
        if (numTextObj.value >= 1) {//如果输入的数量大于等于1，就将数量赋值给商品的数量
            shop.num = numTextObj.value;
            showShoppingCart();
        } else {//数量小于1，直接移除购物车
            delShop(bookCode);
        }

    }

    /**
     * 以指定编号的图书移除购物车
     * @param bookCode 图书编号
     */
    function delShop(bookCode) {
        let index = shoppingCart.findIndex(n => n.book.code == bookCode);
        shoppingCart.splice(index, 1);
        showShoppingCart();
    }


    /**
     * 将指定编号图书加入购物车
     * @param bookCode 图书编号
     */
    function addShoppingCart(bookCode) {
        $("shoppingCartDiv").style.visibility = "visible";
        //通过编号查找是购物车中有无图书
        let shop = shoppingCart.find(n => n.book.code == bookCode);
        if (shop == null) {
            let newShop = new Object();
            newShop.book = bookArray.find(n => n.code == bookCode);
            newShop.num = 1;
            shoppingCart.push(newShop);
        } else {
            shop.num++;
        }
        //显示购物车
        showShoppingCart()
    }

</script>


<body>
<div style="display: flex">
    <div id="bookInfo">
        <div>
            图书名：<span id="nameSpan"></span><br>
            作者：<span id="authorSpan"></span><br>
            出版时间：<span id="dateSpan"></span><br>
            售价：<span id="priceSpan"></span><br>
        </div>
        <img id="bookImg" alt="" width="100px" height="150px">
    </div>
    <div style="height: 400px;overflow: auto">
        图书名：<input type="text" id="findText"><input type="button" value="查询" onclick="findByName()">
        <table width="600px" border="1" cellspacing="0">
            <thead>
            <tr>
                <th>图书名</th>
                <th>作者</th>
                <th>销售价</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="bookList"></tbody>
        </table>
    </div>
</div>

<div class="dialog" id="shoppingCartDiv">
    <div id="contentDiv">
        <div style="height: 170px;overflow-y: scroll">
            <table width="100%">
                <thead>
                <tr>
                    <th>商品名</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>总价</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="cartData"></tbody>
            </table>
        </div>
        <input type="button" value="继续购物" onclick="hideShoppingCart()">总价：<span id="totalSpan"></span>
    </div>
</div>

</body>
</html>